<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="basic">
          <basic-info-form ref="basicInfo" :info="createDto" />
        </el-tab-pane>
        <el-tab-pane label="字段信息" name="columnInfo">
          <el-table ref="dragTable" :data="createDto.fields" row-key="columnId">
            <el-table-column
              label="序号"
              type="index"
              min-width="5%"
              class-name="allowDrag"
            />
            <el-table-column label="字段列名" min-width="10%">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="注释" min-width="10%">
              <template slot-scope="scope">
                <el-input v-model="scope.row.comment"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="类型" min-width="11%">
              <template slot-scope="scope">
                <el-select v-model="scope.row.type">
                  <el-option label="string" value="string" />
                  <el-option label="int" value="int" />
                  <el-option label="byte" value="byte" />
                  <el-option label="short" value="short" />
                  <el-option label="long" value="long" />
                  <el-option label="decimal" value="decimal" />
                  <el-option label="double" value="double" />
                  <el-option label="DateTime" value="DateTime" />
                  <el-option label="Guid" value="Guid" />
                  <el-option label="bool" value="bool" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-form label-width="100px">
        <el-form-item
          style="text-align: center;margin-left:-100px;margin-top:10px;"
        >
          <el-button type="primary" @click="submitForm()">保存</el-button>
          <el-button v-show="activeName === 'columnInfo'" @click="addNewLine()"
            >添加新一行</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import basicInfoForm from "./basicInfoForm";
import {
  createEntityModel,
  updateEntityModel,
  getEntityModel,
} from "@/api/entityModel.js";
export default {
  components: {
    basicInfoForm,
  },
  data() {
    return {
      // 选中选项卡的 name
      activeName: "basic",
      listLoading: true,
      tableData: [],
      url: "",
      // 是否显示弹出层
      open: false,
      selectedIds: [],
      // 非单个禁用
      single: true,
      title: "title",
      isCommon: false,
      isCreate: true,
      createDto: {
        fields: [
          {
            type: "string",
            name: "",
            comment: "",
          },
        ],
        interfaces: [
          {
            value: "",
          },
        ],
        name: "",
        parentClass: "",
        comment: "",
        baseDirPath: "",
        projectName: "",
      },
      entityModelId: "",
    };
  },
  mounted: function () {
    // 网络请求统一处理
    this.entityModelId = this.$route.query.id;
    console.log(this.entityModelId, 132546541);
    if (this.entityModelId.value != "") {
      this.getEntityModel(this.entityModelId);
    }
  },
  methods: {
    addNewLine() {
      var tempField = {
        type: "string",
        name: "",
        comment: "",
      };
      this.createDto.fields.push(tempField);
    },
    async submitForm() {
      if (this.entityModelId == undefined) {
        console.log("创建对象");
        await createEntityModel(this.createDto).then((res) => {
          this.entityModelId = res.id;
        });
        this.open = false;
        this.$message({
          type: "success",
          message: "添加成功!",
        });
      } else {
        console.log("更新对象");
        await updateEntityModel(this.entityModelId, this.createDto);
        this.open = false;
        this.$message({
          type: "success",
          message: "更新成功!",
        });
      }
      this.getEntityModel(this.entityModelId);
    },
    getEntityModel(entityModelId) {
      getEntityModel(entityModelId).then(
        (res) => {
          this.createDto = res;
        },
        (err) => {
          console.log("err :", err);
        }
      );
    },
    handleDelete(index, row) {
      this.createDto.fields.splice(index, 1);
    },
  },
};
</script>

<style></style>
